
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit" />
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../../jquery/jquery-1.11.2.min.js"></script>
    <style>
        .target{border-radius: 3px;border: 1px dashed #DEDEDE;padding: 10px 10px;padding-bottom: 0;position: relative;}
        .target a{display: block;float: left;height: 24px;width: 10.5%;line-height: 22px;overflow: hidden;border: 1px solid #5FB878;border-radius: 4px;margin: 0px 1%;font-size: 13px;background: #f5fff8;color: #42b579;text-align: center;margin-bottom: 10px;}
        .target a:hover i{width:16px;height:22px;}
        .target a:hover{line-height:22px;opacity: 0.8;}
        .target a i{ transition: all 200ms ease-in; position: relative; top: 1px; width: 0; overflow: hidden; height: 0; display: block; float: right; margin-right: 2px; }
        .add_shopList{cursor: pointer;display: block;float: left;height: 24px;width: 10.5%;line-height: 24px;overflow: hidden;border-radius: 4px;margin: 0px 1%;font-size: 13px;color: #a2a2a2;text-align: center;margin-bottom: 10px;}
        .add_shopList i{ margin-right: 3px; }
        .target select,.target .layui-select-title{display:none;overflow:hidden;}
        .target dl{display:none;min-width: inherit;width: 86px;text-align: center;padding: 0;left: inherit;top: 85px;left: -1px;}
        .target .layui-form-select{position:static;}
        .target *{-webkit-user-select:none;  -moz-user-select:none;  -ms-user-select:none;  user-select:none;}
    </style>



</head>
<body>
<div class="container-fluid">
    <div class="layui-form" style="width:700px;margin-top:20px;">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 110px;">商品类目</label>
            <div class="layui-input-block target clearfix">
                <div class="lsta">
                    <a href="javaScript:void(0);"><span>女装</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>男装</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>鞋子</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>箱包</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>母婴</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>内衣</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>美妆</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>配饰</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>居家</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>文体</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>数码</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>电器</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>美食</span><i class="layui-icon">&#x1006;</i></a>
                    <a href="javaScript:void(0);"><span>其他</span><i class="layui-icon">&#x1006;</i></a>
                </div>
                <span class="add_shopList"><i class="layui-icon">&#xe654;</i>添加</span>
                <div class="layui-unselect layui-form-select">
                    <dl class="layui-anim layui-anim-upbit"> </dl>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['layer'], function(){
        var form = layui.form;
        $(".or_title i").toggle(
            function() {
                $(this).html("");
                $(this).parent().next(".formDiv").hide();
            },
            function() {
                $(this).html("");
                $(this).parent().next(".formDiv").show();
            }
        );//收起和展开功能。
        jc_lm();
        var no_add = [];
        function jc_lm(){
            $(".target select").remove()
            if($(".target a").length>=14){
                $(".add_shopList").hide();
            }else{
                $(".add_shopList").show();
            }
        }
        $(".target").delegate('a','click',function(){
            if($(".target a").length>1){
                no_add.push($(this).find("span").html());
                $(this).remove();
            }else{
                layer.msg("都只剩下一个商品类目了，删除不了哦！",{icon:"2"});
            }
            jc_lm();
        });
        $(".add_shopList").click(function(e) {
            if($(".target dl").is(":hidden")){
                var dd = '';
                $.each(no_add, function(i, data) {
                    dd+='<dd lay-value="" class="layui-select-tips">'+data+'</dd>';
                });
                $(".target dl").html(dd);
                var showTop = $(".target").height()+parseInt($(".target").css("padding-top"))+parseInt($(".target").css("padding-bottom"))+10;
                var showLeft = $(".add_shopList").position().left-7;
                $(".target dl").show().css({"top":showTop,"left":showLeft});
                jc_lm();
                e.stopPropagation();
            }else{
                $(".target dl").hide();
            }
        });
        $(document).click(function() {
            $(".target dl").hide();
        });
        $(".target dl").delegate('dd','click',function() {
            $(".lsta").append('<a href="javaScript:void(0);"><span>'+$(this).html()+'</span><i class="layui-icon">ဆ</i></a>');
            $(".target dl").hide();
            //此处需要删除no_add数组中的对应类目  $(this).html()
            var dq = $(this).html();
            $.each(no_add, function(i, data) {
                if(data==dq){
                    no_add.splice(i,1);
                }
            });
            jc_lm();
        });
        /* 删除和添加商品类目 */
    });
</script>
</body>
</html>